<template>
  <div class="container">
    <view>
      <u-navbar title="" bgColor="transparent" :fixed="false" :autoBack="true">
      </u-navbar>
    </view>
    <div class="content">
      <view style="display: flex; flex-direction: column">
        <text
          style="
            font-size: 40rpx;
            font-family: Helvetica, Helvetica;
            color: #000000;
            line-height: 48rpx;
          "
          >设置密码</text
        >
        <text
          style="
            font-size: 28rpx;
            font-family: Helvetica;
            color: #747474;
            line-height: 34rpx;
            margin-top: 23rpx;
          "
          >启动青少年模式，需先设置独立密码</text
        >
      </view>
      <div
        style="
          background: #ffffff;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          border-radius: 32rpx;
          margin-top: 142rpx;
        "
      >
        <number-keyboard
          tabBar
          ref="KeyboarHid"
          @input="onInput"
          psdLength="4"
        ></number-keyboard>
        <u-code-input
          v-model="password"
          maxlength="4"
          dot
          space="18"
        ></u-code-input>
      </div>
      <wButton
        :componentStyle="{
          borderRadius: '43rpx',
          fontWeight: '500',
          marginTop: '63rpx',
          height: '88rpx',
          width: '100%',
          fontSize: '30rpx',
          fontFamily: 'Helvetica',
          lineHeight: '36rpx',
        }"
        fontColor="#fff"
        bgColor="linear-gradient(270deg, #4DCBA5 0%, #6BD6B5 100%)"
        class="wbutton"
        text="确定"
        @click="onStart"
      ></wButton>
    </div>
  </div>
</template>
<script>
import wButton from "@/components/watch-login/watch-button.vue"; //button
import numberKeyboard from "@/components/number-keyboard/number-keyboard.vue";
import passwordInput from "@/components/password-input/password-input.vue";
import w_md5 from "../../../js_sdk/zww-md5/w_md5";
export default {
  components: {
    numberKeyboard,
    passwordInput,
    wButton,
  },
  data() {
    return {
      password: "",
      userInfo: {},
    };
  },
  methods: {
    onStart() {
      if (!this.password) {
        return uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请输入完整",
        });
      }

      // if (this.password !== this.userInfo.teen_pass) {
      //   return uni.showToast({
      //     icon: "none",
      //     position: "bottom",
      //     title: "密码不正确",
      //   });
      // }
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&reco_size=7&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          `/index.php/appv1/user/teenupdate?user_id=${
            uni.getStorageSync("user").uid
          }&user_token=${uni.getStorageSync("user").utoken}&status=open&pass=${
            this.password
          }&` +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          const { teen_pass } = this.userInfo;
          uni.setStorageSync(
            "teenData",
            JSON.stringify({
              teen_pass,
              teen_status: "1",
            })
          );
          uni.showToast({
            icon: "none",
            position: "bottom",
            title: res.data.msg,
            success: () => {
              setTimeout(() => {
                uni.navigateBack();
              }, 2000);
            },
          });
        },
      });
    },
    KeyboarOpen(e) {
      this.$refs.KeyboarHid.open();
    },
    //输入的值
    onInput(val) {
      this.password = val;
    },
  },
  onLoad() {
    const value = uni.getStorageSync("teenData");
    this.userInfo = JSON.parse(value);
    setTimeout(() => {
      this.$refs.KeyboarHid.open();
    }, 50);
  },
};
</script>
<style lang="scss" scoped>
@import url("../../../components/watch-login/css/icon.css");

.container {
  height: 100%;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 300rpx;
  display: flex;

  // filter: blur(1px);
  // opacity: .7;
  &-left {
    width: 443rpx;
    height: 100%;
    background: #d5f6ff;
    opacity: 0.64;
    filter: blur(50rpx);
  }

  &-right {
    width: 383rpx;
    height: 100%;
    background: #fcf1ff;
    opacity: 0.64;
    filter: blur(50rpx);
  }
}

.content {
  padding: 0 31rpx 0 33rpx;
  margin-top: 34rpx;
}
</style>
<style>
page {
  height: 100%;
}
</style>
